<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../css/style.css"/>
      <style>
          body{
background-color: #ededed
          }  header{ background-color: #ededed; width: 100%;height: 50px;}
            header ul li {background-color: #ededed; height: 50px; line-height: 50px; text-align: left; display: none; color: #323237; position: relative;font-size: 18px;text-indent: 10px;}
            header ul li.active{ display: block; }
            .fl{float: left;}
            .jt img{height: 18px; margin-top: 15px;margin-left: 15px; padding-right: 5px}
           .fr{float: right;}
              .sz img{height: 18px;margin-top: 15px;padding-right: 15px}
              #footer{height: 46px;background-color: #f4f4f4; border-top: 0.8px solid #e5e5e5; text-align: center;line-height: 56px;padding: 10px}
              #footer button{border: none;background-color: #07c160;color: #ffffff;padding: 8px;border-radius:3px; font-size: 12px}


              .flex-con{
                overflow: auto
              }
.shuo{float: left;}
.shuo img{ height: 28px}
.srk{float: left;  height: 35px;background-color: #fff; margin-left: 10px;border-radius:3px; }
.jia{float: right; }
.jia img{ height: 28px}
.srk input{ height: 35px;       border:0;outline:none; padding: 0px; margin: 0px}
.biaoqing{float: right; margin-right: 10px}
.biaoqing img{ height: 28px}

      </style>
  </head>
  <body>
    <div id="wrap" class="flex-wrap flex-vertical">
    <header id="header">
      <div class="fl jt"  tapmode onclick="api.closeWin();" ><img src="../image/jt2.png" height="40" ></div>
        <ul style="float: left;">
            <li class="border-b active" >群发</li>

        </ul>

    </header>
    <div id="main" class="flex-con">

    </div>
    <div id="footer" onclick="sr()" tapmode class="border-t">

    </div>
  </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript">

  function sr(){
    var UIChatBox = api.require('UIChatBox');
 UIChatBox.open({
     placeholder: '',
     maxRows: 4,
     autoFocus:true,
     emotionPath: 'widget://res/img/emotion',
     texts: {
         recordBtn: {
             normalTitle: '按住说话',
             activeTitle: '松开结束'
         },
         sendBtn: {
             title: '发送'
         }
     },
     styles: {
         inputBar: {
             borderColor: '#d9d9d9',
             bgColor: '#f2f2f2'
         },
         inputBox: {
             borderColor: '#B3B3B3',
              textColor:'#8e8e8e',
             bgColor: '#FFFFFF',
             leftIcon:{                      //(可选项)JSON对象，输入框左侧图标  本参数仅支持android
       size:20,                //(可选项)数字类型；icon的大小；默认：20
       path:''//字符串类型；icon的路径；支持widget:// fs://
   }
         },
         emotionBtn: {
             normalImg: 'widget://image/biaoqing.png'
         },
         extrasBtn: {
             normalImg: 'widget://image/jia.png'
         },
         keyboardBtn: {

         },
         speechBtn: {
             normalImg: 'widget://image/shuo.png'
         },
         recordBtn: {
             normalBg: '#c4c4c4',
             activeBg: '#999999',
             color: '#000',
             size: 14
         },
         indicator: {
             target: 'both',
             color: '#c4c4c4',
             activeColor: '#9e9e9e'
         },
         sendBtn: {
             titleColor: '#fff',
             bg: '#07c160',
             activeBg: '#07a352',
             titleSize: 14
         }
     },
     extras: {
         titleSize: 10,
         titleColor: '#a3a3a3',
         isAdaptScreenSize:false,
         btns: [{
             title: '相册',
             normalImg: 'widget://image/xiangce.png',
             activeImg: 'widget://image/xiangce.png',
         }, {
             title: '拍摄',
             normalImg: 'widget://image/paise.png',
             activeImg: 'widget://image/paise.png',
         }, {
             title: '视频拍摄',
             normalImg: 'widget://image/spps.png',
             activeImg: 'widget://image/spps.png',
         }, {
             title: '位置',
             normalImg: 'widget://image/weizhi.png',
             activeImg: 'widget://image/weizhi.png',
         }, {
             title: '红包',
             normalImg: 'widget://image/hongbao.png',
             activeImg: 'widget://image/hongbao.png',
         }, {
             title: '转账',
             normalImg: 'widget://image/zhuangzhang.png',
             activeImg: 'widget://image/zhuangzhang.png',
         }, {
             title: '语音输入',
             normalImg: 'widget://image/yuyinsr.png',
             activeImg: 'widget://image/yuyinsr.png',
         }, {
             title: '我的收藏',
             normalImg: 'widget://image/wdsc.png',
             activeImg: 'widget://image/wdsc.png',
         }, {
             title: '名片',
             normalImg: 'widget://image/mp.png',
             activeImg: 'widget://image/mp.png',
         }, {
             title: '文件',
             normalImg: 'widget://image/wj.png',
             activeImg: 'widget://image/wj.png',
         }]
     }
 }, function(ret, err) {

 });
  }

      apiready = function(){
    $api.fixStatusBar( $api.dom('header') );


      var header = $api.byId('header');
        var footer = $api.byId('footer');

        var winWidth = api.winWidth;
            //   w=winWidth- $api.dom('#shuo').offsetWidth- $api.dom('#jia').offsetWidth- $api.dom('#biaoqing').offsetWidth-50
          //     $api.css($api.byId('srk'),'width:'+w+'px;');

          //适配iOS 7+，Android 4.4+状态栏
          header.style.paddingTop = api.safeArea.top +"px" ;
   footer.style.paddingBottom = api.safeArea.bottom + 'px';
          api.openFrame({
            name: 'qunfaFrame',
            url: 'qunfaFrame.html',
            pageParam: {
                id:api.pageParam.id,


            },
            rect: {
              x:0,
              y:api.safeArea.top+50,
               w: 'auto',
              h:  api.winHeight-$api.dom('#footer').offsetHeight-api.safeArea.top- 50
            }
          });
sr();
    };


  </script>
  </html>
